<!-- 历史数据页面 -->
<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="form-container">
        <el-form ref="form" label-width="100px">
          <el-form-item label="快速搜索:" prop="fast_search">
            <el-radio-group v-model="where.fast_search" size="mini">
              <el-radio :label="6" border>6小时</el-radio>
              <el-radio :label="24" border>1天</el-radio>
              <el-radio :label="72" border>3天</el-radio>
              <el-radio :label="168" border>7天</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="监控时间:" prop="datetime">
            <el-date-picker
              v-model="where.datetime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="timestamp"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="查询类型:" prop="search_type">
            <el-radio-group v-model="where.search_type" size="mini">
              <el-radio :label="10">原始数据</el-radio>
              <el-radio :label="300">5分钟数据</el-radio>
              <el-radio :label="3600">小时数据</el-radio>
              <el-radio :label="86400">天数据</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              :loading="loading"
              @click="search"
              >查询</el-button
            >
            <el-button
              size="mini"
              type="success"
              class="ele-btn-icon"
              icon="el-icon-download"
              @click="exportExcel"
              >数据导出
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="echarts-container">
        <div ref="echartsDom" style="width: 100%; height: 96%"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "History",
  data() {
    return {
      // 提交状态
      loading: false,
      where: {
        datetime: [],
        fast_search: 6,
        search_type: 300,
        device_no: "J001",
        device_name: "8208-04",
      },
      chart: null,
      // offsets: [0,35,70,105,150,200,250,300,330,375,430,480,520],
      chartOptions: {
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        // 其他配置项
        grid: {
          left: "5%",
          right: "3%",
          bottom: "10%",
          containLabel: true,
        },
        // grid: [
        //   {left: '10%', right: '10%', top: '10%', bottom: '50%'}, // 第一个图表区域，包括第一个Y轴
        //   {left: '10%', right: '10%', top: '60%', bottom: '10%'}  // 第二个图表区域，包括第二个Y轴
        // ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {show: true}
        //   }
        // },
        legend: {
          type: "plain",
          bottom: 0,
          data: [
            "电流",
            "电压",
            "井底温度",
            "频率",
            "流压",
            "校准流压",
            "瞬时气量",
            "流量计温度",
            "流量计压力",
            "转速",
            "产水量",
            "液柱高度",
            "套压",
          ],
          selected: {
            电流: true,
            电压: false,
            井底温度: false,
            频率: false,
            流压: true,
            校准流压: false,
            瞬时气量: true,
            流量计温度: false,
            流量计压力: false,
            转速: false,
            产水量: false,
            液柱高度: false,
            套压: true,
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              rotate: 30, // 设置标签旋转角度为45度
            },
            // prettier-ignore
            data: [],
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: '电流',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FFA500",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}A",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '电压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 35,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#4B0082",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}V",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '井底温度',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 70,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#4682B4",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}°C",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '频率',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 105,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#66B511",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}Hz",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '流压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 35,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#0000FF",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}MPa",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '校准流压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 200,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#AAFF00",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}MPa",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '瞬时气量',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 100,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FF0000",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}m³/h",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '流量计温度',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 300,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FF7F50",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}℃",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '流量计压力',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 330,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#00FFFF",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}kPa",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '转速',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 375,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#000000",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}RPM",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '产水量',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 430,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#008000",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}m³/h",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '液柱高度',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 480,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#8A2BE2",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}m",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '套压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 150,
            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FF1493",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: {
              formatter: "{value}MPa",
            },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
        ],
        series: [
          {
            name: "电流",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FFA500", // 设置曲线颜色
            },
            yAxisIndex: 0,
            data: [],
          },
          {
            name: "电压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#4B0082", // 设置曲线颜色
            },
            yAxisIndex: 1,
            data: [],
          },
          {
            name: "井底温度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#4682B4", // 设置曲线颜色
            },
            yAxisIndex: 2,
            data: [],
          },
          {
            name: "频率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#66B511", // 设置曲线颜色
            },
            yAxisIndex: 3,
            data: [],
          },
          {
            name: "流压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#0000FF", // 设置曲线颜色
            },
            yAxisIndex: 4,
            data: [],
          },
          {
            name: "校准流压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#AAFF00", // 设置曲线颜色
            },
            yAxisIndex: 5,
            data: [],
          },
          {
            name: "瞬时气量",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FF0000", // 设置曲线颜色
            },
            yAxisIndex: 6,
            data: [],
          },
          {
            name: "流量计温度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FF7F50", // 设置曲线颜色
            },
            yAxisIndex: 7,
            data: [],
          },
          {
            name: "流量计压力",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#00FFFF", // 设置曲线颜色
            },
            yAxisIndex: 8,
            data: [],
          },
          {
            name: "转速",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#000000", // 设置曲线颜色
            },
            yAxisIndex: 9,
            data: [],
          },
          {
            name: "产水量",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#008000", // 设置曲线颜色
            },
            yAxisIndex: 10,
            data: [],
          },
          {
            name: "液柱高度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#8A2BE2", // 设置曲线颜色
            },
            yAxisIndex: 11,
            data: [],
          },
          {
            name: "套压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FF1493", // 设置曲线颜色
            },
            yAxisIndex: 12,
            data: [],
          },
        ],
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2, // line width
            },
          },
        },
      },
    };
  },
  created() {
    // 获取 this.$route.query 对象
    console.log("---------------$route-----------", this.$route);
    const query = this.$route.query;
    // 获取 device_no 的值
    this.where.device_no = query.device_no; // J001
    this.where.device_name = query.name; // 8208-04

    // 设置页面标题
    document.title = "历史数据【" + this.where.device_name + "】";

    this.search();
  },
  mounted() {
    this.chart = echarts.init(this.$refs.echartsDom);
    this.chart.setOption(this.chartOptions);
    // 监听窗口大小变化事件
    window.addEventListener("resize", this.handleResize);
    this.chart.on("legendselectchanged", this.handleLegendSelectChanged);
  },
  beforeDestroy() {
    // 在组件销毁前解绑resize事件
    window.removeEventListener("resize", this.handleResize);
    this.chart.dispose(); // 销毁 echarts 实例
  },
  methods: {
    // 窗口大小变化时调用的方法
    handleResize() {
      // 调用ECharts图表的resize方法
      if (this.chart) {
        this.chart.resize();
      }
    },

    handleLegendSelectChanged(params) {
      console.log(params);
      this.chartOptions.legend.selected = params.selected;
      // {
      //   "name": "瞬时气量",
      //   "selected": {
      //   "电压": true,
      //     "电流": true,
      //     "井底温度": true,
      //     "频率": true,
      //     "流压": false,
      //     "校准流压": true,
      //     "瞬时气量": false,
      //     "流量计温度": true,
      //     "流量计压力": true,
      //     "转速": true,
      //     "产水量": true,
      //     "液柱高度": true,
      //     "套压": true
      // },
      //   "type": "legendselectchanged"
      // }
      const selectedSeries = params.selected;
      const yAxisIndex = [];
      this.chartOptions.series.forEach((el, index) => {
        let flag = selectedSeries[el.name];
        yAxisIndex.push({ index: index, flag: flag });
      });

      let yAxis=this.updateYFn(yAxisIndex)
      this.chart.setOption({
        yAxis: yAxis,
        grid:this.chartOptions.grid
      });
      console.log(this.chartOptions.grid);
      // this.chart.resize();
    },

    search() {
      this.loading = true;
      this.$http
        .post("/device/history", this.where)
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            // this.$message.success(res.data.msg);
            var data = res.data.data;
            console.log(data);
            this.chartOptions.xAxis[0].data = data.map(
              (item) => item.time_block
            );
            // '电压', '电流', '井底温度', '频率', '流压', '校准流压', '瞬时气量', '流量计温度', '流量计压力', '转速', '产水量', '液柱高度', '套压'
            // 电流
            this.chartOptions.series[0].data = data.map(
              (item) => item.avg_dianliu
            );

            // 电压
            this.chartOptions.series[1].data = data.map(
              (item) => item.avg_voltage
            );

            // 井底温度
            this.chartOptions.series[2].data = data.map(
              (item) => item.avg_temp
            );
            // 频率
            this.chartOptions.series[3].data = data.map(
              (item) => item.avg_pinlv
            );
            // 流压
            this.chartOptions.series[4].data = data.map(
              (item) => item.avg_yali
            );
            // 校准流压
            this.chartOptions.series[5].data = data.map(
              (item) => item.avg_biao_liuya
            );
            // 瞬时气量
            this.chartOptions.series[6].data = data.map(
              (item) => item.avg_bkll
            );
            // 流量计温度
            this.chartOptions.series[7].data = data.map((item) => item.avg_wd);
            // 流量计压力
            this.chartOptions.series[8].data = data.map((item) => item.avg_yl);
            // 转速
            this.chartOptions.series[9].data = data.map(
              (item) => item.avg_run_speed
            );
            // 产水量
            this.chartOptions.series[10].data = data.map(
              (item) => item.avg_chanshui
            );
            // 液柱高度
            this.chartOptions.series[11].data = data.map(
              (item) => item.avg_yezhu_high
            );
            // 套压
            this.chartOptions.series[12].data = data.map(
              (item) => item.avg_tao_value
            );
            this.$forceUpdate();
            this.renderChart();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    renderChart(){
      let arr = [];
      this.chartOptions.series.forEach((el, index) => {
        let flag = this.chartOptions.legend.selected[el.name];
        arr.push({ index: index, flag: flag });
      });
      this.chartOptions.yAxis = this.updateYFn(arr);
      this.chart.setOption(this.chartOptions,false,true);
      console.log(this.chartOptions.grid);
    },
    /* 导出数据Excel */
    exportExcel() {
      let info = Object.assign({}, this.where);
      console.log(info);
      this.$http.post("/historydata/exportExcel", info).then((res) => {
        let data = res.data;
        if (data.code == 0) {
          // 下载文件
          window.location.href = data.data;
          this.$message({
            type: "success",
            message: "导出成功",
          });
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    updateYFn(yAxisIndex) {
      const yAxis = [];
      let idx = -1;
      yAxisIndex.forEach((el) => {
        const yAxisOption = this.chartOptions.yAxis[el.index];
        if (el.flag) {
          idx++;
          yAxisOption.offset = idx * 66;
        } else {
          yAxisOption.offset = 0;
        }
        yAxis.push(yAxisOption);
      });
      console.log(idx);
      if(idx>4){
          this.chartOptions.grid.left='18%'
        }else{
          this.chartOptions.grid.left='8%'
        }
      console.log(yAxis);
      return yAxis;
    },
  },
};
</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 65vh;
  /*margin-top: 10px;*/
  /*overflow: auto;*/
}

.form-container {
  width: 100%;
  height: 20vh;
}

.el-form-item {
  margin-bottom: 3px;
}
</style>
